import React from 'react';

interface BreadcrumbProps {
  folderPath: string[];
  onNavigate: (path: string) => void;
}

const Breadcrumb: React.FC<BreadcrumbProps> = ({ folderPath, onNavigate }) => {
  const handleNavigate = (index: number) => {
    if (index === -1) {
      // 点击根目录
      onNavigate('');
    } else {
      // 点击某个文件夹
      const pathToNavigate = folderPath.slice(0, index + 1).join('/');
      onNavigate(pathToNavigate);
    }
  };

  return (
    <div className="bg-gray-100 px-4 py-2 rounded-lg mb-4">
      <div className="flex items-center text-sm">
        <button
          onClick={() => handleNavigate(-1)}
          className="text-blue-600 hover:text-blue-800 hover:underline cursor-pointer"
        >
          📁 根目录
        </button>
        
        {folderPath.map((folder, index) => (
          <React.Fragment key={index}>
            <span className="mx-2 text-gray-500">/</span>
            <button
              onClick={() => handleNavigate(index)}
              className="text-blue-600 hover:text-blue-800 hover:underline cursor-pointer"
            >
              {folder}
            </button>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
};

export default Breadcrumb; 